<!-- 系统管理->系统参数->新增/编辑 -->
<template>
  <div class="partamsChange">
    <el-breadcrumb separator="/" class="bread-title">
      <el-breadcrumb-item :to="{ path: '/systemParams' }">系统参数（字典）</el-breadcrumb-item>
      <el-breadcrumb-item>{{pageType}}</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form ref="typeForm" :model="typeForm" label-width="100px"  >
      <el-form-item
        v-for="({label,prop},idx) in formList"
        :key="idx"
        :label="label+'：'"
        :prop="prop"
        :rules="[
      { required: true, message: `请输入${label}`, trigger: 'blur' },
    ]"
      >
        <el-input v-model.trim="typeForm[prop]" autocomplete="off" style="width:500px"></el-input>
      </el-form-item>
    </el-form>
    <p style="text-align:center;max-width:600px">
      <el-button type="primary" @click="addSave()">保存</el-button>
      <el-button type="primary" @click="back()">返回</el-button>
    </p>
  </div>
</template>

<script>
import api from "@/api/apiPath";
export default {
  name: "partamsChange",
  computed: {},
  data() {
    return {
      typeForm: {
        typeName: "",
        dicDesc: "",
        dicKey: "",
        dicValue: "",
        dicOrder: ""
      },
      formList: [
        { label: "字典种类", prop: "typeName" },
        { label: "字典描述", prop: "dicDesc" },
        { label: "key值", prop: "dicKey" },
        { label: "value值", prop: "dicValue" },
        { label: "字典排序", prop: "dicOrder" }
      ],
      typeStatus: "",
      pageType: "",
      typeFunction: {
        //页面状态
        add: () => {
          this.pageType = "新增";
        },
        edit: row => {
          this.pageType = "编辑";
          this.typeForm = row; //加载表单信息
        }
      }
    };
  },
  methods: {
    addSave() {
      this.$refs.typeForm.validate(valid => {
        if (!valid) {
          return;
        }
        let params = {
          ...this.typeForm,
        };
        let urls = {add:'/city/sysdic/dicAdd',edit:'/city/sysdic/dicUpdate'}
        this.$axios
          .post(urls[this.typeStatus], params)
          .then(res => {
              let text = {add:"添加成功",edit: "编辑成功"};
              this.$alert(text[this.typeStatus], "提示", {
                type: "success",
                confirmButtonText: "确定",
                callback: action => {
                  this.$router.go(-1);
                }
              });
            
          })
          .catch(error => {
            console.log(error);
          });
      });
    },
    back() {
      this.$router.go(-1);
    },
  },
  created() {
    let { pageType, row } = this.$route.query;
    //更改页面状态（新增/编辑）
    this.typeStatus = pageType;
    //执行该状态init()
    this.typeFunction[pageType](row);
  },
  destroyed() {},
  
};
</script>

<style lang="stylus" >
.partamsChange {
}
</style>
